"use client";

import React from 'react';
import { Button } from 'antd';
import Image from 'next/image';

const Hero: React.FC = () => {
  return (
    <section className="relative pt-10 pb-16 flex flex-col items-center text-center bg-white">
      {/* 装饰元素 */}
      <div className="absolute top-10 right-1/4 z-0">
        <Image src="/images/shape1.svg" alt="Shape" width={60} height={60} />
      </div>
      {/* <div className="absolute bottom-20 left-1/5 z-0">
        <Image src="/images/shape2.svg" alt="Shape" width={60} height={60} />
      </div> */}
      <div className="absolute top-1/3 left-1/4 z-0">
        <Image src="/images/shape3.svg" alt="Shape" width={60} height={60} />
      </div>
      
      {/* Beta通知 */}
      <div className="backdrop-blur-sm rounded-xl mb-16 relative z-10 flex flex-col justify-between" style={{ 
        width: '538px', 
        height: '190px', 
        paddingLeft: '32px', 
        paddingRight: '32px', 
        paddingTop: '30px', 
        paddingBottom: '0',
        background: 'linear-gradient(180deg, rgba(93, 223, 224, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%)'
      }}>
        <div>
          <div className="flex items-center mb-3">
            <span className="inline-block w-3 h-3 rounded-full bg-[#7145FE] mr-2"></span>
            <div style={{ fontSize: '32px', fontFamily: 'var(--font-outfit)', fontWeight: 600, color: '#13141D', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Nemo&apos;s very first beta launch!</div>
          </div>
          <p style={{
            fontFamily: 'var(--font-outfit)',
            fontSize: '20px',
            fontWeight: 'normal',
            lineHeight: '1',
            textAlign: 'left',
            color: '#13141D',
            margin: 0
          }}>
            Be among the first to experience Nemo Beta — and shape the future of AI video editing.
          </p>
        </div>
        <Button 
          type="primary" 
          className="bg-[#7145FE] hover:bg-[#7145FE]/90 border-none rounded-[8px] px-6 w-full text-white font-medium mt-auto"
          style={{
            backgroundColor: '#7145FE',
            fontSize: '16px',
            height: '36px'
          }}
        >
          Get started
        </Button>
      </div>
      
      {/* 主标题 */}
      <h1 className="font-outfit text-[40px] font-semibold leading-normal text-center flex items-center tracking-normal text-[#13141D]">
        Your AI-powered Video Editor
      </h1>
      <h1 className="font-outfit text-[40px] font-semibold leading-normal text-center flex items-center tracking-normal text-[#13141D]">
        Making Creation
      </h1>
      <h1 className="font-outfit text-[48px] font-semibold leading-normal text-center flex items-center tracking-normal text-[#13141D]">
        <span className="relative">
          <span className="relative z-10">Effortless</span>
          <span className="absolute bottom-0 left-0 right-0 h-[20px] bg-[#5DDFE0]"></span>
        </span>, 
        <span className="relative ml-2">
          <span className="relative z-10">Enjoyable</span>
          <span className="absolute bottom-0 left-0 right-0 h-[20px] bg-[#E3ABF2]"></span>
        </span>, 
        <span className="ml-2">and </span>
        <span className="relative">
          <span className="relative z-10">Exceptional</span>
          <span className="absolute bottom-0 left-0 right-0 h-[20px] bg-[#B3A7FF]"></span>
        </span>!
      </h1>
      <p className="font-outfit mt-[30px] text-[24px] font-normal leading-normal text-center flex items-center tracking-normal text-[#13141D]">
        Efficient editing to enhance content creation and unlock your creative potential
      </p>
    </section>
  );
};

export default Hero; 